import React from "react";
import { Route, useNavigate, useLocation, MemoryRouter as Router, } from 'react-router-dom';
import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline, ShopbagOutline } from 'antd-mobile-icons';
import TabBar from "@/components/tabBar";


export interface BottomNavProps {
    tabs?: Array<{
        key: string;
        title: string;
        icon: React.ReactNode;
    }>;
    activeKey?: string;
}

export const defaultProps: BottomNavProps = {
    tabs: [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/category',
            title: '分类',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/shoppingCart',
            title: '购物车',
            icon: <MessageOutline />,
        },
        {
            key: '/me',
            title: '我的',
            icon: <UserOutline />,
        }
    ],

}

const BottomNav: React.FC<BottomNavProps> = (props) => {
    const { tabs, activeKey, ...rest } = { ...defaultProps, ...props };
    const { pathname } = useLocation();
    const navigate = useNavigate();

    const setRouteActive = (value: string) => {
        navigate(value)
    }

    const activeKeyTab = activeKey || pathname;

    if (!tabs || tabs.length === 0) {
        return null;
    }

    return (
        <>
            <div className='seal-bottom-fixed'>


                <TabBar >

                    <TabBar.Item key={1} badge={<AppOutline fontSize={24} />} title='首页' />
                    <TabBar.Item key={2} badge={<UnorderedListOutline fontSize={24} />} title='分类' />
                    <TabBar.Item key={3} badge={<ShopbagOutline fontSize={24} />} title='购物车' />
                    <TabBar.Item key={4} badge={<UserOutline fontSize={24} />} title='我的' />


                </TabBar>
            </div>
        </>
    );
}

export default BottomNav;
